<template>
    <div>
      <van-nav-bar
        title="我的赞"
        left-arrow
        @click-left="onClickLeft"
      />

      <div
        class="list"
        v-for="(item,index) of newsReviersVoTwo"
        :key="index"
      >
        <ul>
          <li class="one-row">
            <div>
              <img
                class="tx"
                :src="item.customerHandImage"
              >
            </div>
            <div class="one-row-bottom">
              <p class="name">{{item.customerNickName}}</p>
              <p style="color: rgba(151, 149, 149, 100);font-size: 12px;">{{item.localReviersTime}}</p>
            </div>
          </li>
          <li>
            <div class="titleText">
              <p>{{item.localReviewsTitle}}/{{item.localReviewsText}}</p>
            </div>
          </li>
          <li>
            <div class="demo-contentImg" v-for="pic in item.pictureList">
              <van-image width="10rem" height="10rem" fit="cover"  :src="pic.localPictureUrl"/>
            </div>
          </li>
          <li>
            <div class="demo-primary">
              <van-tag plain type="primary" style="padding: 0.15rem">石家庄同城</van-tag>
              <van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>
            </div>
          </li>
          <li>
            <div class="demo-contento" style="text-align: right;padding-top: 0.4rem">
              <div class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
                <van-icon name="chat-o" />
                <span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
              </div>
              <div class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
                <van-icon :name="item.localFabulousStatus==1?name1:name"/>
                <span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- 自定义图标 -->
      <van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="block-top">
              <p>全部评论{{replyVoList.length}}条</p>
            </div>
            <div class="block-list">
              <div class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
                <img src="https://img.yzcdn.cn/vant/logo.png">
                <div class="list-demo-content">
                  <div>
                    <h2>{{item.customerNickName}}</h2>
                    <p>{{item.localReplyTime}}</p>
                  </div>
                  <p class="neiRong">{{item.localReplyText}}</p>
                </div>
                <div class="block-list-like">
                  <van-icon name="like-o"/>
                  <span class="block-list-likes" style="font-size: 0.8rem;">{{item.localReplyFabulous}}</span>
                </div>
              </div>
            </div>

            <div class="block-bottom">
              <van-cell-group>
                <van-field
                  v-model="localReplyText"
                  clearable label=""
                  left-icon="edit"
                  placeholder="评论一下~"
                  center
                  style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem"
                  @click-left-icon="insertLocalReply"
                />
              </van-cell-group>
            </div>

          </div>
        </div>
      </van-popup>

  </div>
</template>

<script>
  import {Toast} from "vant";
  import { Tab, Tabs } from 'vant';
  import {
    selectNewsReviersVoTwo,
    selectReplyVoByRevierwsId,
    addLocalReply,
    localFabulousJian,
    localFabulousJia1,
    localFabulousJia,
  } from '@/api/customer/local.js';
  export default {
    name: "news_praise",
    data () {
      return {
        name: 'like-o',
        name1: 'like',
        //点赞过的消息集合
        newsReviersVoTwo:[],
        //发布信息的id
        localReviersId:'',
        //回复的框
        show:false,
        //回复的列表
        replyVoList:[],
        //评论的内容
        localReplyText:'',
        //点赞中间表数据参数
        localFabulous:{
          localReviersId:'',
          localFabulousStatus:'',
        },

      }
    },
    //页面渲染前自动加载
    created(){
      this.getSelectNewsReviersVoTwo();
    },
    //方法
    methods: {
      onClickLeft() {
        // Toast('返回');
        //返回上一级页面
        this.$router.go(-1)
      },
      //点赞过的数据
      getSelectNewsReviersVoTwo(){
        selectNewsReviersVoTwo().then((res)=>{
          this.newsReviersVoTwo = res.data.data;
        })
      },
      //查看发布信息回复
      huiFuSee(localReviewsId){
        this.localReviersId = localReviewsId;
        this.show = true;
        selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
          this.replyVoList = res.data.data;
          console.log(res);
        })
      },
      // 发表评论
      insertLocalReply(){
        addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
          console.log(res)
          if(res.code == 500){
            Toast("评论失败");
          }else{
            Toast("评论成功");
            this.huiFuSee(this.localReviersId);
            this.localReplyText = '';
          }
        })
      },
      // 点赞
      giveThumbsUp(localReviewsId,localFabulousStatus){
        this.localFabulous.localReviersId = localReviewsId;
        console.log(localReviewsId,localFabulousStatus)
        switch (localFabulousStatus) {
          case 1:
            this.localFabulous.localFabulousStatus = 0;
            localFabulousJian(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                this.getSelectNewsReviersVoTwo();
              }
              console.log(res)
            })
            break
          case 0:
            this.localFabulous.localFabulousStatus = 1;
            localFabulousJia1(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                this.getSelectNewsReviersVoTwo();
              }
              console.log(res)
            })
            break
          default:
            this.localFabulous.localFabulousStatus = 1;
            localFabulousJia(this.localFabulous).then((res)=>{
              if (res.data.code==200){
                this.getSelectNewsReviersVoTwo();
              }
              console.log(res)
            })
            break;
        }
      },


    },

  }
</script>

<style scoped>
  .price {
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    text-align: left;
    margin-top: 5vw;
    font-family: SourceHanSansSC-bold;
  }

  .four-right {
    margin-left: 8px;
  }

  .spxq {
    color: rgba(91, 91, 91, 100);
    font-size: 12px;
    text-align: left;
    font-family: PingFangSC-regular;
    -webkit-line-clamp: 3;
  }

  .four-row {
    margin: 10px 0;
    display: flex;
    align-items: unset;
  }

  .four-left img {
    width: 24vw;
    height: 24vw;
  }

  .three-img {
    margin-left: 2%;
  }

  .three-row img {
    margin-top: 3%;
  }

  .three-row {
    display: flex;
  }

  .three-row img {
    width: 24vw;
  }

  p {
    display: -webkit-box;
    /*-webkit-box-orient: vertical;*/
    /*-webkit-line-clamp: 2;*/
    overflow: hidden;
  }

  .two-row {
    margin-top: 8px;
    color: rgba(91, 91, 91, 100);
    font-size: 13px;
    text-align: left;
    font-family: PingFangSC-regular;
  }

  .one-row-bottom {
    margin-left: 8px;
  }

  .list {
    width: 100%;
    overflow: hidden;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #ffffff;
    margin: 10px 0;
  }

  .tx {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
  }

  .one-row {
    display: flex;
  }

  .name {
    color: rgba(104, 104, 103, 100);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .demo-contentImg{
    display: inline-block;
    margin: 0.1rem;
  }
  .titleText{
    text-align: left;
  }
  .demo-primary{
    float: left;
    padding: 0.5rem 0;
  }
  .demo-contento .demo-contento-chat{
    margin-top: 25px;
    display: inline-block;
    margin-right: 0.4rem;
  }
  .demo-contento .demo-contento-like{
    display: inline-block;
  }


  .wrapper {
    display: flex;
    align-items: center;
    justify-content:center;
    height: 100%;
    position: relative;
    margin-bottom: 50px ;
  }
  .block {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
  }
  .block .block-top{
    padding-left: 1rem;
    font-weight: 700;
    float: left;
  }
  .block .block-list{
    padding: 1rem 1.5rem;
  }
  .block .block-list .block-list-demo{
    padding: 1rem 0;
    position: relative;
  }
  .block .block-list .block-list-like{
    display: inline-block;
  }
  .block .block-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block .block-list .list-demo-content div{
    float: left;
    padding-bottom: 0.5rem;
  }
  .block .block-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block .block-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .neiRong{
    width: 80%;
    font-size: 0.75rem;
    text-align: left;
  }
  .block .block-list .block-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block .block-bottom{
    padding: 1rem;
    width: 91%;
    position: fixed;
    z-index: 100;
    bottom: 0rem;
    background-color: #fff;
  }
</style>
